<template>
    <div class="background">
        <el-card>
            <h3>用户登录</h3>
            <el-form
                ref="form"
                :mode="form"
                label-position="right"
                label-width="70px"
            >
                <el-form-item label="账号">
                    <el-input
                        type="text"
                        v-model="form.username"
                        prefix-icon="el-icon-user-solid"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input
                        type="password"
                        v-model="form.password"
                        prefix-icon="el-icon-s-order"
                    >
                    </el-input>
                </el-form-item>

                <div class="form-footer">
                    <el-button type="primary" @click="handleLogin"
                        >登录</el-button
                    >
                    <el-button @click="handleSkipRegister">注册</el-button>
                </div>
            </el-form>
        </el-card>
    </div>
</template>

<script>
import { userLogin } from "../api/index";
import { regularPassword } from "../rules";

export default {
    name: "UserLogin",
    data() {
        return {
            form: {
                username: "",
                password: "",
            },
        };
    },

    methods: {
        //用户点击登录
        async handleLogin() {
            const { password } = this.form;
            const infoMap = {
                username: "用户名",
                password: "密码",
            };
            const validationRule = {
                // username: () => regularName.test(username),
                password: () => regularPassword.test(password),
            };

            for (let key in validationRule) {
                if (!validationRule[key]()) {
                    this.$message.error(`${infoMap[key]}格式错误，请重试`);
                    return;
                }
            }
            const res = await userLogin("/user/login", this.form);
            console.log("=======", res);
            if (res.data.code === 0) {
                this.$router.push({ name: "home" });
                this.$message({
                    message: "成功登录",
                    type: "success",
                });
                let { age, level, phone, sex, username, type } = res.data.data;
                let userinfo = { age, level, phone, sex, username, type };
                localStorage.setItem("userinfo", JSON.stringify(userinfo));
            } else {
                this.$message.error(res.data.msg);
            }
        },

        //用户点击注册
        handleSkipRegister() {
            this.$router.push({ name: "register" });
        },
    },
};
</script>

<style lang="less" scoped>
.background {
    height: 100vh;
    background-image: url("../assets/backimg.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    position: relative;

    .el-card {
        width: 500px;
        position: absolute;
        top: 200px;
        left: 50%;
        border-radius: 20px;
        transform: translateX(-200px);
        padding: 50px 0;

        h3 {
            text-align: center;
        }

        .login-footer {
            width: 100%;
            display: flex;
            justify-content: space-around;
        }

        .form-footer {
            display: flex;
            justify-content: center;
            margin-top: 50px;
        }
    }
}
</style>